<!--
 * @Author: xiweidong 1324156920@qq.com
 * @Date: 2025-06-19 18:11:43
 * @LastEditors: xiweidong 1324156920@qq.com
 * @LastEditTime: 2025-06-19 19:16:23
 * @FilePath: \dem2terrain-master\test\terrain_mapbox.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Query terrain elevation</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="./mapbox-gl.css" rel="stylesheet">
  <script src="./mapbox-gl.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    // 注意，请写自己的token运行
    mapboxgl.accessToken = 'pk.eyJ1IjoiYm9ibzlvayIsImEiOiJja3cxZjU1Z2UwMnFnMzBvajh4Y29iZTBiIn0.NcOkYbGRCj-C-gm1my6NZg';

    const map = new mapboxgl.Map({
      container: 'map',
      zoom: 14,
      center: [(108.1206497787500069 + 109.5449302440760135) * 0.5,
      (33.3205401503979957 + 34.3597102474359986) * 0.5],
      
      //  center: [(107.9998611111110023 + 109.0001388888887845) * 0.5,
      // (33.9998611111111231 + 35.0001388888888982) * 0.5],
      pitch: 76,
      // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
      style: 'mapbox://styles/mapbox/satellite-streets-v12',
      hash: false
    });

    map.on('load', (e) => {
      // Set custom fog
      map.setFog({
        'range': [-0.5, 2],
        'color': '#def',
        'high-color': '#def',
        'space-color': '#def'
      });

      // Add terrain source, with slight exaggeration
      map.addSource('mapbox-dem', {
        'type': 'raster-dem',
        // 'tiles': ['./terrain/{z}/{x}/{y}.png'],
        'tiles': ['./bl-terrain/{z}/{x}/{y}.png'],
        tileSize: 256,
        'maxzoom': 14,
        'minzoom': 5,
        'projection': 'EPSG:4326'
      });
      map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
    });
    map.on('click', function (e) {
      console.log(e);
    })



  </script>

</body>

</html>